<template>
  <view class="com-orderContent">
    <image mode="aspectFill" class="img" :src="item.goods_image" />
    <view class="info">
      <view class="info-main">
        <view class="desc">
          {{ item.goods_name }}
        </view>
        <view class="unit">
          <view class="unit-price"> ¥ {{ item.price }} </view>
          <view class="unit-num"> X{{ item.num }} </view>
        </view>
      </view>
      <view class="info-sub">
        <!-- {{ item.goods_colour_name }}；{{ item.goods_stock_name }}码 -->
        {{ size }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
  },
  computed: {
    size() {
      if (this.item.goods_colour_name) {
        return this.item.goods_colour_name + ";" + this.item.goods_stock_name;
      } else {
        return " ";
      }
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss">
.com-orderContent {
  width: 100%;
  padding: 25rpx 0;
  @include border;
  display: flex;
  align-items: center;
  .img {
    width: 150rpx;
    height: 150rpx;
    border-radius: 10rpx;
    margin-right: 25rpx;
  }
  .info {
    width: calc(100% - 175rpx);
    &-main {
      @include flex;
      .desc {
        font-size: 28rpx;
        font-weight: 500;
        width: calc(100% - 150rpx);
        box-sizing: border-box;
        padding-right: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .unit {
        text-align: right;
        width: 150rpx;
        &-price {
          font-size: 26rpx;
        }
        &-num {
          color: #aaaaaa;
          font-size: 22rpx;
          line-height: 45rpx;
        }
      }
    }
    &-sub {
      font-size: 26rpx;
      color: #aaaaaa;
      line-height: 65rpx;
    }
  }
}
</style>
